<script type="text/javascript">
if (typeof console == "undefined") {    
	this.console = { 
		log: function (msg) {} 
	};
}
var ws, name, client_list={};

function connect(){
	// 创建websocket
	ws = new WebSocket("ws://"+document.domain+":2346");
	// 当socket连接打开时，输入用户名
	ws.onopen = onopen;
	// 当有消息时根据消息类型显示不同信息
	ws.onmessage = onmessage; 
	ws.onclose = function() {
	  console.log("连接关闭，定时重连");
	  connect();
	};
	ws.onerror = function() {
		console.log("出现错误");
	};
}
// 连接建立时发送登录信息
function onopen()
{
	if(!name)
    {
        name = prompt('输入你的名字：', '');
	    if(!name || name=='null'){  
	        name = '游客';
	    }
    }
    var login_data = '{"type":"login","client_name":"'+name.replace(/"/g, '\\"')+'","room_id":"房间1"}';
    console.log(login_data);
    ws.send(login_data);
}

// 服务端发来消息时
function onmessage(e)
{
    var data = eval("("+e.data+")");
    switch(data['type']){
        // 服务端ping客户端
        case 'ping':
            ws.send('{"type":"pong"}');
            break;;
        // 登录 更新用户列表
        case 'login':
        	alert(data['data']);
    }
}
connect();
</script>
<style>
*{
 	margin:0;
 	padding:0;
}
.meta{

	width:500px;
	height:800px;
	border-radius: 5%;
	border:3px solid #000;
	margin:10px auto;
	position:relative;
}
.login_info{
	width:100%;
	height:40px;
	border-bottom:3px solid #000;
	position:absolute;
	left:0;
	top:0;
	line-height:40px;
	text-align:center;
	display:none;
}
</style>
<div class="meta">
	<div class="login_info">
	</div>
</div>